@import '../../styles/variables.scss';

.dt-right-bar {
	display: flex;
	height: 100%;

	.dt-right-bar-content {
		flex: 1;
		background: var(--sideBar-background);
	}

	.dt-right-bar-title {
		width: 30px;
		background: var(--editorGroupHeader-tabsBackground);
	}

	.dt-right-bar-title-item {
		width: 30px;
		margin-bottom: 0;
		padding: 5px 0;
		font-size: 12px;
		line-height: 30px;
		letter-spacing: 4px;
		border-bottom: 1px solid var(--sideBarSectionHeader-border);
		cursor: pointer;
		transition: border-color 0.3s;
		user-select: none;
		writing-mode: vertical-rl;

		&:hover {
			color: $main-color;
			background-color: #eef6fe;
		}

		&.active {
			position: relative;
			color: $main-color;
			background-color: var(--activityBar-activeBorder);

			&::after {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				width: 2px;
				height: 100%;
				background-color: $main-color;
				content: '';
			}
		}
	}
}
